<template>
  <el-dialog
    ref="refDlg"
    title="编辑"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    width="700px"
    @close="closeDialog"
  >
    <el-table
      :data="modifyList"
      border
      size="mini"
      max-height="180"
      style="width: 100%"
    >
      <el-table-column prop="num" label="数量">
        <template #header>
          <span style="color: red">*</span>数量
        </template>
        <template v-slot="{row}">
          <el-input v-model.number="row.num" />
        </template>
      </el-table-column>
      <el-table-column min-width="130" prop="saleTime" label="销售时间">
        <template #header>
          <span style="color: red">*</span>销售时间
        </template>
        <template v-slot="{row}">
          <el-date-picker
            v-model="row.saleTime"
            type="month"
            style="width:90%"
            placeholder="选择销售时间"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="130" prop="shopName" label="门店">
        <template v-slot="{row}">
          <el-select
            v-model="row.shopCode"
            placeholder="请选择"
          >
            <el-option
              v-for="item in shopList"
              :key="item.shopCode"
              :label="item.shopName"
              :value="item.shopCode"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="productDescription" label="产品描述" width="180" />
      <el-table-column prop="productCode" label="产品编码" width="100" />
    </el-table>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button size="mini" :loading="submiting" type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveSaleData } from '@/api/display/salesData'
export default {
  name: 'EditForm',
  // components: { CategoryDlg },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    shopList: {
      type: Array,
      default: () => { return [] }
    },
    tableData: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      submiting: false
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.modifyList = JSON.parse(JSON.stringify(this.tableData))
  },

  methods: {
    getSelectData(data) {

    },
    handleAdd() {
      this.showCategoryDlg = true
    },
    handleDel() {

    },
    changeCategory(data) {
      if (!this.formData.id) return
      if (data && data.length > 0) {
        this.$set(this.formData, 'categoryId', data[0].id)
        this.$set(this.formData, 'categoryName', data[0].name)
        this.$set(this.formData, 'categoryCode', data[0].code)
      } else {
        this.$set(this.formData, 'categoryId', '')
        this.$set(this.formData, 'categoryName', '')
        this.$set(this.formData, 'categoryCode', '')
      }
    },
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.modifyList = []
      done && done()
    },
    // 提交表单处理
    submitForm() {
      if (this.submiting) return
      const temp = this.modifyList.filter(v => (!v.num && v.num !== 0) || !v.saleTime)
      if (temp.length > 0) {
        this.$message.warning('请检查【数量】和【销售时间】是否填写')
        return
      }
      const data = []
      this.modifyList.forEach(v => {
        const temp = this.shopList.filter(i => v.shopCode === i.shopCode)
        data.push({ ...v, shopName: temp.length > 0 ? temp[0].shopName : '',
          saleTime: typeof v.saleTime === 'object' ? `${v.saleTime.getFullYear()}-${v.saleTime.getMonth() < 9 ? '0' + (v.saleTime.getMonth() + 1) : v.saleTime.getMonth() + 1}-01 00:00:00` : v.saleTime
        })
      })
      saveSaleData(data, 2).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.closeDialog()
          this.$emit('success', true)
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
// 禁用颜色
/deep/.el-radio__input.is-disabled.is-checked .el-radio__inner{
 background-color: #9d9fa1;
}
/deep/.el-textarea.is-disabled .el-textarea__inner{
  color: #606266;
}
/deep/.el-input.is-disabled .el-input__inner {
  color: #606266;
}
</style>
